<template>
  <div class="commentshelf">
    <van-nav-bar title="历史记录"  left-arrow @click-left="onClickLeft" class="barcolor"></van-nav-bar>
    <bookshow class="bookshow" v-for="(item,index) in comment" :key="index" :item="item" />
    <span class="demand">
        回应广大用户需求，本软件会定期清除缓存节省空间,本历史记录会在您下次登录时自动清空，请及时将喜欢的书加入书架！
    </span>
    <nomore />
    
    <div v-if='show' class="botto">未登录或者历史记录为空</div>
    <div class="pic"  v-if='show'>
    <van-image
        round
        width="5rem"
        height="5rem"
       src="bimg/ls.jpg"
      />
    </div>
    <div v-if='show' class="bottom">
        <span>
          历史记录为空？
          <i class="register" @click="denglv">登录</i>
        </span>
        <span class="forgetpass">
           <i class="register" @click="scbook">寻找小说</i>
        </span>   
      </div>
    </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import foot from "@/components/foot.vue";
import Header from "@/components/Header.vue";
import bookshow from "@/components/bookshow.vue";
import nomore from "@/components/nomore.vue";
import booklist from "@/components/booklist.vue";
export default {
  name: "Home",
  components: {
    foot,
    Header,
    bookshow,
    nomore,
    booklist,
   
  },
  data() {
    return {
      comment: '',
       show:false,
    };
  },
  methods: {
      onClickLeft(){
          console.log(1)
          this.$router.push('/personal')
      },
    scbook(){
      this.$router.push('/Home')
    },
    denglv(){
      this.$router.push('/denglv')
    },
  },
  mounted() {
    console.log(1)
    console.log(JSON.parse(localStorage.getItem('bookx')))
    this.comment = JSON.parse(localStorage.getItem('lsbook'))
    if(this.comment==null){
        this.show = true
    }
    console.log(this.comment)
  },
};
</script>

<style  scoped>
.botto {
  height: 1.2rem;
  width: 100%;
  color: #9d9d9d;
  text-align: center;
  line-height: 1.2rem;
  font-size: 0.5rem;
  position: relative;
  top: 40%;
}
.bottom {
  display :flex;
  width: 100%;
  justify-content:space-around;
  position: relative;
  top:4rem;
}
.forgetpass{
  color :red;
}
.van-cell{
  line-height: 16px;
  height: 56px;
}
.pic{
    text-align: center;
}
.demand{
    display: block;
    text-align: center;
    color:rgb(80, 193, 221);
}
</style>